<template>
	<view class="content">
		<view class="content-list" v-for="(item,index) in pageList" :key="index">
			<view class="title">
				{{item.title}}
			</view>
			<view class="right">
				<button @click="goRouteDetails(item.id)">查看详情</button>
			</view>
		</view>
		<!-- <view class="customizedRoute">
			<button class="customizedRoute-button">定制路线</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					pageNum: 1,
					pageSize: 10,
				},
				pageList: []
			};
		},
		methods: {
			// 跳转到路线详情
			goRouteDetails(id) {
				uni.navigateTo({
					url: `/packagesIndex/pages/AttractionDetail/AttractionDetail?id=${id}`
				})
			},
			// 获取数据
			async getpageList() {
				let res = await this.$u.api.getpageList(this.page)
				if (res.code == 200) {
					this.pageList = res.rows
					this.total = res.total
				}
			},
			loadMore() {
				// 模拟异步加载数据
				setTimeout(() => {
					if (this.pageList.length >= this.total) {
						uni.showToast({
							title: '没有更多数据了',
							icon: "none"
						})
					} else {
						this.page.pageNum = this.page.pageNum + 1
						this.page.pageSize = this.page.pageSize + 10
						uni.showLoading({
							title: '加载中...'
						})
						this.getpageList()
						setTimeout(() => {
							uni.hideLoading()
						}, 2000)
					}
				}, 1000);
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 刷新数据的逻辑
			this.page.pageNum = 1
			this.page.pageSize = 10
			this.getpageList()
			// 模拟异步操作
			setTimeout(() => {
				// 刷新完成后，结束下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 上拉加载
		onReachBottom() {
			this.loadMore();
		},
		onLoad() {
			this.getpageList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 95vh;
		background-color: #f6f6f6;


		.content-list {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 90rpx 20rpx;
			box-sizing: border-box;
			margin: 20rpx;

			.title {
				width: 90%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.right {
				width: 100%;

				button {
					float: right;
					margin-top: 20rpx;
					width: 30%;
					background-color: #fff;
					padding: 10rpx 20rpx;
					border-radius: 10rpx;
					font-size: 28rpx;
					color: #666666;
					border: 2rpx solid rgba(217, 217, 217, 0.5);
				}
			}
		}

		.customizedRoute {
			padding: 30rpx 20rpx 50rpx 20rpx;
			width: 720rpx;
			position: fixed;
			bottom: 0;
			background-color: #fff;

			.customizedRoute-button {
				width: 100%;
				color: #fff;
				background-color: $overall-color;
				text-align: center;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
			}
		}
	}
</style>